<template>
	<view class="hotel">
		<!-- f1背景页面 -->
		<view class="hotel-bg">
			<view class="hotel-bg-one">
				<image src="../../static/img/hotelBg.png" mode="widthFix"></image>
			</view>
			<view class="hotel-bg-two">
				<div class="hotel-search-box animate__animated animate__bounce">
				<HotelSearch></HotelSearch>
				</div>
			</view>
			<view class="hotel--bg-three">
				<h3 class="hotel--bg-threeTitle">热门推荐</h3>
				<view class="hotel--bg-threeList">

					<view class="hotel--bg-threeItem" v-for="(item,index) in hotelList" :key="index">
						<view class="hotel--bg-threeItemZhezhao">
							<image :src="item.zhezhaoImg" mode="widthFix"></image>
							<view class="threeItemZhezhao-map">
								<view class="Zhezhao-map">
									<uni-icons color="#fff" size="20" type="location"></uni-icons>
									<view class="threeItemZhezhao-title">
										<text>{{item.zhezhaoTitle1}}</text>
										<text class="circle"></text>
										<text>{{item.zhezhaoTitle2}}</text>
									</view>
								</view>


							</view>
						</view>

						<view class="hotel--bg-threeItemText">
							<p>{{item.itemText}}</p>
							<p>
								<view class="text-price1">
									<text>￥{{ item.textPrice1 }}</text>
									<text>/起</text>
								</view>
								<view class="text-price2">
									￥{{item.textPrice2}}
								</view>
								<view class="text-price3">
									已售{{item.textPrice3}}
								</view>
							</p>
						</view>
					</view>



				</view>
			</view>

			<view class="hotel-bg-footer">
			<uni-load-more status="loading" iconType="auto" :showIcon="true"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import HotelSearch from "@/components/hotel/hotelSearch.vue"
	
	export default {
		data() {
			return {
				hotelList: [{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
					{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
					{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
					{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
					{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
					{
						zhezhaoImg: '../../static/img/hotelItem.png',
						zhezhaoTitle1: '北京',
						zhezhaoTitle2: '北京花间堂',
						itemText: '时光美好丽致酒店（北京科技城店）',
						textPrice1: 305,
						textPrice2: 500,
						textPrice3: 100
					},
				]
			}
		},
		methods: {

		},
		components:{
			HotelSearch,
		}
	}
</script>

<style lang="scss" scoped>
	.hotel {
		width: 750rpx;
		background-color: #f6f6f6;

		.hotel-bg {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;

			.hotel-bg-one {
				width: 100%;

				image {
					width: 750rpx;
				}
			}

			.hotel-bg-two {
				width: 750rpx;
				height: 310rpx;
				position: relative;
				background-color: #f6f6f6;

				.hotel-search-box {
					width: 92%;
					height: 570rpx;
					background-color: #fff;
					position: absolute;
					left: 4%;
					top: -300rpx;
					border-radius: 10rpx;
				}
			}

			.hotel--bg-three {
				width: 750rpx;
				background-color: #f6f6f6;
				padding: 20rpx;
				display: flex;
				flex-direction: column;

				.hotel--bg-threeTitle {
					font-size: 38rpx;
					font-family: '微软雅黑';
				}

				// 热门推荐循环列表
				.hotel--bg-threeList {
					margin-top: 20rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					z-index: 1;
					// 热门推荐循环列表 --项
					.hotel--bg-threeItem {
						width: 345rpx;
						border-radius: 10rpx;
						background-color: #fff;
						margin-bottom: 20rpx;
						display: flex;
						flex-direction: column;

						.hotel--bg-threeItemZhezhao {
							display: flex;
							flex-direction: column;
							position: relative;

							image {
								width: 100%;
								z-index: 0;
							}

							.threeItemZhezhao-map {
								position: absolute;
								background-color: rgba(191, 197, 205, 0.3);
								left: 0;
								top: 0;
								right: 0;
								bottom: 0;
								border-radius: 10rpx;

								.Zhezhao-map {
									position: relative;
									top: 85%;
									left: 10rpx;
									display: flex;
									flex-direction: row;
									height: 50rpx;
									align-items: center;

									.threeItemZhezhao-title {
										font-size: 32rpx;
										font-weight: bold;
										color: #fff;
									}
								}

							}

						}

						.hotel--bg-threeItemText {
							display: flex;
							flex-direction: column;

							p:nth-child(1) {
								font-size: 30rpx;
								color: #000;
								margin: 20rpx 0 20rpx;
							}

							p:nth-child(2) {
								display: flex;
								height: 70rpx;
								justify-content: space-between;
								align-items: center;
								font-size: 24rpx;
								color: #a6a6a6;
								font-weight: 500;
								padding: 0 10rpx;

								.text-price1 {
									line-height: 70rpx;

									text:nth-child(1) {
										font-size: 34rpx;
										font-weight: 600;
										color: #ff0000;
									}
								}

								.text-price2 {
									text-decoration: line-through;
								}

							}
						}

					}
				}
			}

			.hotel-bg-footer {
				width: 750rpx;
				height: 100rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
	}
</style>
